<template>
  <view class="box flex">
    <view class="left-area safe-top">
      <view v-for="i in 6" :key="i" class="item f-c-3" @click="changeItem(i)" :class="{'active-item':i === current}">
        分类
      </view>
    </view>
    <view class="right-area safe-top">
      <view class="u-f-sm flex-between p-r-20">
        <view>
          分类
        </view>
        <view>
          <up-icon name="arrow-right"  @click="toPath('#')"></up-icon>
        </view>
      </view>
      <view class="grid-3 p-20" style="gap: 30rpx">
        <view v-for="i in 6" :key="i" @click="toPath('#')">
          <image :src="`https://picsum.photos/id/${i*20+1}/200`" class="category-img" mode="widthFix"/>
          <span class="u-f-sm">电脑主机</span>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {toPath} from "@/util/router/router";

const current = ref(0)


const changeItem = (i) => {
  current.value = i
}
</script>

<style scoped lang="scss">
@import "~@/static/css/index.css";
@import "~@/static/css/global.scss";

.box {
  height: 100vh;

  .left-area {
    width: 200rpx;
    height: 100vh;
    background: #f4f4f4;
    overflow: auto;

    .active-item {
      color: #fd4b03;
      background: #fff;
    }
    &>view:last-child {
      margin-bottom: 200rpx;
    }
  }

  .right-area {
    flex: 1;
    height: 100vh;
    overflow: auto;

    &>view:last-child {
      margin-bottom: 260rpx;
    }

    .category-img{
      width: 100%;
      border-radius: 10rpx;
      height: auto;
    }
  }

  .item {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

</style>